<!--@author vidy3587@gmail.com-->
<template>
  <div class="with-banner-padding has-bottom-out">
    <div class="publish-header publish-header-rank publish-container">
      <div class="header-container">
        <div class="rank-content rank-badge-top">
          <div class="rank-badge">
            <img src="~@/assets/rank_icon.png" class="rank-icon">
            排行榜
          </div>
        </div>
      </div>
    </div>
    <div class="with-repeat-bg publish-container mgn-top-33">
      <div class="rank-content">
        <div class="rank-table-header">
          <div class="col-1">选手</div>
          <div class="col-1">排名</div>
          <div class="col-1">编号</div>
          <div class="col-1">话筒</div>
        </div>
        <div class="rank-list">
          <van-list  v-model="loading"
                     :finished="finished"
                     :error.sync="error"
                     error-text="请求失败，点击重新加载"
                     finished-text="没有更多了"
                     @load="onLoad">
            <div v-for="item in list" class="rank-item" :key="item.number">
              <div class="col-1">
                <img src="" class="rank-avatar" alt="">
              </div>
              <div class="col-1">{{ item.rank }}</div>
              <div class="col-1">{{ item.number }}</div>
              <div class="col-1">{{ item.ticketNum }}</div>
            </div>
          </van-list>
        </div>

      </div>

    </div>
  </div>
</template>

<script>

import {getRankList} from "@/api/dm";

export default {
  components: {},
  name: "HostRank",
  data() {
    this.pageNum = 1;
    this.pageSize = 10;
    return {
      loading: false,
      finished: false,
      list: [
      ],
      error: null
    }
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    async onLoad() {
      this.loading = true
      try {
        const res = await getRankList({pageNum: this.pageNum, pageSize: this.pageSize});
        // this.list = this.list.concat(res.data.rows);
        res.data.rows.forEach(item => this.list.push(item));
        this.finished = this.list.length >= res.data.total;
        console.log("this.list: ", this.list)
        this.pageNum ++
      } catch (e) {
        this.error = e;
        console.log(e);
      } finally {
        this.loading = false;
      }

    }
  }
}
</script>

<style scoped lang="scss">
.vote-host-bg {
  min-height: 100vh;
}



.rank-content {
  width: px2rem(532px);
  margin-left: px2rem(52px + 65px);
}



.rank-table-header {
  box-sizing: border-box;
  padding-left: px2rem(44px);
  display: flex;
  background: $mainThemeColor;
  border-radius: px2rem(20px) px2rem(20px) 0 0;
  width: 100%;
  height: px2rem(59px);
  line-height: px2rem(59px);
  font-size: px2rem(24px);
  color: $warmColor;
}

.mgn-top-33 {
  padding-top: px2rem(33px);
}

.rank-item {
  box-sizing: border-box;
  height: px2rem(80.9px);
  display: flex;
  align-items: center;
  padding-left: px2rem(44px);
  border-bottom: px2rem(1px) solid $mainThemeColor;
  font-size: px2rem(24px);
  color: $lightWarmColor;
}

.rank-avatar {
  width: px2rem(52px);
  height: px2rem(52px);
  background-color: $warmColor;
  border-radius: px2rem(5px);
}

.rank-list {
  height: px2rem(80.9px * 10);
  overflow-y: auto;
}
::v-deep {
  .van-list__finished-text {
    font-size: px2rem(24px);
    line-height: px2rem(50px);
    color: $lightWarmColor;
  }
  //.van-loading__spinner.van-loading__spinner--circular {
  //  width: px2rem(24px) !important;
  //  height: px2rem(24px) !important;
  //}
  //.van-loading__text {
  //  font-size: px2rem(24px);
  //  line-height: px2rem(50px);
  //  color: $lightWarmColor;
  //}
}
</style>